<template>
    <div class="storeInfo">
        <div class="head">  
            <p class="headtxt">推荐特殊规则设置</p>                        
        </div>
         
        <!-- tab部分 -->
        <div class="tabContainer">
            <el-table :data="tableData" stripe style="width: 100%;text-align:center" 
            tooltip-effect="dark">
                <el-table-column prop="rule_no_cn" label="规则说明" fixed></el-table-column>
                <el-table-column prop="items" label="商品">
                    <template slot-scope="scope">
                        <p v-for="(itemItem,i) in scope.row.items" :key="i">{{itemItem.item_name}}</p>
                    </template>
                </el-table-column>

                <el-table-column prop="" label="操作" width="200">
                    <template slot-scope="scope">
                        <span v-for="(item,indexLimit) in limitList" :key="indexLimit" class="lightFont" @click="theClick(scope.row)">
                            <i>{{item.name}}</i>
                            <i v-if="indexLimit != limitList.length-1">&nbsp;|&nbsp;</i>
                        </span>
                    </template>          
                        
                    
                </el-table-column>
                

            </el-table>
                        
        </div>
        <!-- 分页部分 -->
        <!-- <el-pagination
            background
            layout="prev, pager, next"
            @current-change="changePage"
            :page-size="size"
            :hide-on-single-page=true
            :total="total">{{total}}
        </el-pagination> -->
  

        <!-- 添加 -->
        <el-dialog title="编辑" :visible.sync="add_edit_show">
            <el-form class="editBox">
                <el-button class="addbutton" round type="primary" size="small" @click="addtr">+</el-button>
                <ul>
                    <li>
                        <div class="divtr">
                            <p>商品名称</p>
                            <p>平均酒量</p>
                            <p>整体加量</p>
                            <p>推荐价格</p>
                            <p></p>
                        </div>
                    </li>
                    <li v-for="(tritem,t) in trList" :key="t">
                        <div class="divtr">
                            <p>
                                <goodsBox :id="t" :input_url="goodsearchurl" :default_txt="tritem.item_name" v-on:getsearchItemGood="getitemid"></goodsBox>
                            </p>
                            <p>
                                <input v-model="tritem.average_capacity" placeholder="平均酒量">
                            </p>
                            <p>
                                <input v-model="tritem.plus_capacity" placeholder="整体加量">
                            </p>
                            <p>
                                <input v-model="tritem.combo_item_price" placeholder="推荐价格">
                            </p>
                            <p style="color:red;line-height:40px;cursor:pointer" @click="delli(t)">X</p>
                        </div>
                    </li>
                </ul>
                
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="add_edit_show = false">取 消</el-button>
                <el-button type="primary" @click="addyes">确 定</el-button>
            </div>
        </el-dialog>


    </div>
</template>
<style lang="scss">
.divtr .el-input__inner{
    width: 130px;
    padding:5px;
}
</style>
<style lang="scss" scoped>
.shortinput{width: 100px;margin: 0 5px}
.headtxt{height: 40px;line-height: 40px;width: 100%;padding-left: 20px;box-sizing: border-box;background: #fff}
.editBox{
   .addbutton{font-size:20px;margin: 10px 5px} 
   .divtr{
       padding:5px 10px;
       display: flex;
       justify-content: space-between;
       p{
            width: 110px;
            text-align: center;
            input{
                width: 80px;
                height: 40px;
                border-radius: 4px;
                border: 1px solid #DCDFE6;
                color: #606266;
                padding:0 5px;
            } 
       }
       p:nth-child(1){
           width: 140px
       }
       
   }
}

</style>
<script>
import { abc } from "../../../../js/abc.js";
import {potUrl} from '../../../../js/config_url.js';
import goodslist from '../../pop/goodslist.vue'
export default {
    data(){
        return {          
            tableData:[],
            total:50,
            size:20,
            add_edit_show:false,//编辑、添加弹框的显示开关            
            pageNum:1,//page
            limitList:[],//权限的存储数组
            editW:'120px',
            editForm:{
                holiday:'',//平日/周末
                charmber_id:'',//房型
                period_id:'',//档位
                items_price:'',//酒水价格
                reduce_price:'',//减免价格
                
            },//编辑弹框内需要的数据
            limitList_str:'',
            trList:[],//弹框内添加商品和相关数据的数组
            goodsearchurl:potUrl.ritemssearch,//搜索商品
            params:{},//编辑确定接口传递的数据
        }
    },
    components:{
        goodsBox:goodslist
    },
    mounted(){
        var that = this;
        abc.get(that,potUrl.specialruleslist,{},function(res){
            that.total = res.data.length
            that.tableData =  res.data;
        });//列表 
        
    },
    created(){
        var that = this;       
        that.limitList = [
            {name:'编辑',url:'edit'}
        ]     
    },
    methods:{ 
        theClick(b){
            let that = this; 
             that.params.rule_no =  b.rule_no;
            abc.get(that,potUrl.specialrulesinfo,{rule_no:b.rule_no},function(res){                  
                // that.trList = res.data;//赋值给编辑的数据；
                var arrobj = []
                $.each(res.data,function(r,ritem){
                    var obj = {}
                    obj.item_id = ritem.item_id;
                    obj.item_name = ritem.item_name;
                    obj.average_capacity = ritem.average_capacity;
                    obj.plus_capacity = ritem.plus_capacity;
                    obj.combo_item_price = ritem.combo_item_price;
                    obj.sort = ritem.sort;
                    that.trList.push(obj)
                })
                that.add_edit_show =true;                   
            })
            
            
        },
        changePage(val){
            //翻页
            var that = this;
            this.form.pageNum = val;
           abc.getList(that,potUrl.itemList,that.form);
        },
        addyes(a){
            //添加时的确定按钮操作；
            let that = this;
            var arr = [];
            $.each(that.trList,function(a,arritem) {
                var obj = {}
                obj.sort = (a+1)
                obj.item_id = arritem.item_id;
                obj.average_capacity = arritem.average_capacity;
                obj.plus_capacity = arritem.plus_capacity;
                obj.combo_item_price = arritem.combo_item_price
                arr.push(obj)
            })
            that.params.items = JSON.stringify(arr); 
            abc.post(that,potUrl.specialrulesdone,that.params,function(res){
                that.add_edit_show = false;
                abc.get(that,potUrl.specialruleslist,{},function(res){
                    that.total = res.data.length
                    that.tableData =  res.data;
                });//列表 
            })
            
        },
        addtr(){
            // 弹框内的+
            var that= this;
            if(that.trList.length>=5){
                that.$message('不能超过五条哟~')
                return
            }
            var tritemObj = {};
            tritemObj.item_id = ''
            tritemObj.item_name = ''
            tritemObj.average_capacity = ''
            tritemObj.plus_capacity = ''
            tritemObj.combo_item_price = '';
            that.trList.push(tritemObj)
        },
        delli(t){
            //删除某一条数据
            var that = this;
            that.trList.splice(t,1)            
        },
        getitemid(data,e){
            var that = this;  
            that.trList[data.tritemindex].item_id = data.item_id        
            that.trList[data.tritemindex].item_name = data.item_name         
        }

    }
}

</script>